<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/static/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="/static/css/fonts.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/mit_app_inventor.css">
    <script type="text/javascript">
     <!--//--><![CDATA[// ><!--

                                   var gotoappinventor = function() {
                                       var referrer = document.location.pathname;
                                       var patt = /.*hour-of-code.*/;
                                       if (referrer.match(patt)) {
                                           window.open("http://code.appinventor.mit.edu/", "new");
                                       } else {
                                           window.open("http://ai2.appinventor.mit.edu/", "new");
                                       }
                                   }
     //--><!]]>
    </script>
    <title>Experimental</title></head>
<body class="mit_app_inventor"><nav class="navbar navbar-expand-xl navbar-light">
    <a class="navbar-brand" href="http://appinventor.mit.edu/">
	<img src="/static/images/logo2.png" alt="Logo">
    </a>
    <button type="button" class="btn create-btn" style="margin-right: 20px;" onclick="gotoappinventor();">Create Apps!</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle Navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
	<ul class="navbar-nav" style="margin-left: auto;">
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    About
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/about-us">About App Inventor</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/our-team">Our Team</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/expert-trainers">Expert Trainers</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/app-month-gallery">App of the Month</a>
                    <a class="dropdown-item"
                       href="http://appinventor.mit.edu/ai2/ReleaseNotes">Release Notes</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/about/termsofservice" target="_blank">Terms of Service</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Educators
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/teach" target="_blank">Teach</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/ai2/tutorials">Tutorials</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu/news" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    News
		</a>
		<div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/news">In the news</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/events">Events</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/stories">Stories from the field</a>
		</div>
	    </li>
	    <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu/explore/resources" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Resources
		</a>
		<div class="dropdown-menu">
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/get-started">Get Started</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/library">Documentation</a>
		    <a class="dropdown-item" href="https://community.appinventor.mit.edu"
                       target="_blank">Forums</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/ai2/tutorials">Tutorials</a>
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/books">App Inventor Books</a>
		    <a class="dropdown-item"
                       href="https://github.com/mit-cml/appinventor-sources"
                       target="_blank">Open Source Information</a>
	            <a class="dropdown-item" href="http://appinventor.mit.edu/explore/research">Research</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/hour-of-code">Hour of Code</a>
                    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/resources">Additional Resources</a>
		</div>
	    </li>
            <li class="nav-item dropdown">
		<a class="nav-link" href="http://appinventor.mit.edu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Blogs
		</a>
                <div class="dropdown-menu">
		    <a class="dropdown-item" href="http://appinventor.mit.edu/explore/blog">App Inventor Blog</a>
	        </div>
            </li>
        </ul>
        <div style="display: inline-flex;margin-left:auto;margin-right:0">
	    <a href="https://giving.mit.edu/give/to?fundId=3832320" target="_blank">
                <button type="button" class="btn donate-btn" style="margin-right: 20px;">Donate</button></a>
            <script>
             (function() {
                 var cx = '005719495929270354943:tlvxrelje-e';
                 var gcse = document.createElement('script');
                 gcse.type = 'text/javascript';
                 gcse.async = true;
                 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//www.google.com/cse/cse.js?cx=' + cx;
                 var s = document.getElementsByTagName('script')[0];
                 s.parentNode.insertBefore(gcse, s);
             })();
            </script>
            <gcse:searchbox-only></gcse:searchbox-only>
        </div>
	<!-- <form class="form-inline" action="/action_page.php">
	     <div class="form-group has-search">
	     <span class="fa fa-search form-control-feedback"></span>
	     <input type="text" class="form-control" placeholder="Search">
	     </div>
	     </form> -->
    </div>
</nav>
<div class="default-page">
            <div class="header">
	        <h1 class="font-weight-bold text-center offset-xl-2 col-xl-8">Experimental</h1>
            </div>
            <div class="container-fluid">
                <article class="documentation">
<p><a href="index.html">« Back to index</a></p>
<h1 id="experimental">Experimental</h1>

<p>Table of Contents:</p>

<ul>
  <li><a href="#ChatBot">ChatBot</a></li>
  <li><a href="#FirebaseDB">FirebaseDB</a></li>
  <li><a href="#ImageBot">ImageBot</a></li>
</ul>

<h2 id="ChatBot">ChatBot</h2>

<p>The ChatBot component is a non-visible component for chatting with an AI
 chatbot. This version uses a proxy run by MIT that in turn uses the ChatGPT
 generative large language model.</p>

<h3 id="ChatBot-Properties">Properties</h3>

<dl class="properties">
  <dt id="ChatBot.ApiKey" class="text"><em>ApiKey</em></dt>
  <dd>An ApiKey for ChatGPT. User supplied. If provided, we will use it instead of the
 API key embedded in the chat proxy service.</dd>
</dl>

<p>Note: We do not provide this as a DesignerProperty, it should be stored using the
 blocks, preferably using the Obfuscated Text block to provide some protection
 (not perfect protection) of the key embedded in a packaged app.</p>

<dl>
  <dt id="ChatBot.Model" class="text"><em>Model</em></dt>
  <dd>Set the name of the model to use. See https://appinv.us/chatbot for the current list of supported models. Leaving this blank will result in the default model set by the provider being used</dd>
  <dt id="ChatBot.Provider" class="text"><em>Provider</em></dt>
  <dd>Set the name of the provider to use. See https://appinv.us/chatbot for the current list of supported providers.</dd>
  <dt id="ChatBot.System" class="text"><em>System</em></dt>
  <dd>The “System” value given to ChatGPT. It is used to set the tone of a conversation. For example: “You are a funny person.”</dd>
  <dt id="ChatBot.Token" class="text wo"><em>Token</em></dt>
  <dd>The MIT Access token to use. MIT App Inventor will automatically fill this
 value in. You should not need to change it.</dd>
</dl>

<h3 id="ChatBot-Events">Events</h3>

<dl class="events">
  <dt id="ChatBot.ErrorOccurred">ErrorOccurred(<em class="number">responseCode</em>,<em class="text">responseText</em>)</dt>
  <dd>The ErrorOccurred event will be run when an error occurs during
 processing, such as if your you are over usage quota, or some
 other error signaled by ChatGPT or PaLM. See
 https://appinv.us/chatbot for current information.</dd>
  <dt id="ChatBot.GotResponse">GotResponse(<em class="text">responseText</em>)</dt>
  <dd>Event indicating that a request has finished and has returned data (output from ChatBot).</dd>
  <dt id="ChatBot.GotResponseWithImage">GotResponseWithImage(<em class="text">responseText</em>,<em class="text">fileName</em>)</dt>
  <dd>Event indicating that we have received a response from the chatbot proxy which
 includes an Image and possibly text to go with it.</dd>
</dl>

<h3 id="ChatBot-Methods">Methods</h3>

<dl class="methods">
  <dt id="ChatBot.Converse" class="method"><i></i> Converse(<em class="text">question</em>)</dt>
  <dd>Ask a question of the Chat Bot. Successive calls will remember information from earlier in the conversation. Use the “ResetConversation” function to reset for a new conversation.</dd>
  <dt id="ChatBot.ConverseWithImage" class="method"><i></i> ConverseWithImage(<em class="text">question</em>,<em class="any">source</em>)</dt>
  <dd>Ask a question of the Chat Bot using an Image. Successive calls will remember information from earlier in the conversation. Use the “ResetConversation” function to reset for a new conversation.</dd>
  <dt id="ChatBot.CreateImage" class="method"><i></i> CreateImage(<em class="text">description</em>)</dt>
  <dd>Create an Image. Note: Only Gemini is currently supported. Do not specify a model in order to get the most up-to-date model to use.</dd>
  <dt id="ChatBot.ResetConversation" class="method"><i></i> ResetConversation()</dt>
  <dd>Reset the current conversation, Chat bot will forget any previous conversation when responding in the future.</dd>
</dl>

<h2 id="FirebaseDB">FirebaseDB</h2>

<p>The Firebase component communicates with a Web service to store
 and retrieve information.  The component has methods to
 store a value under a tag and to retrieve the value associated with
 the tag. It also possesses a listener to fire events when stored
 values are changed.</p>

<p><a href="../other/firebaseIntro.html">Additional Information</a></p>

<h3 id="FirebaseDB-Properties">Properties</h3>

<dl class="properties">
  <dt id="FirebaseDB.DeveloperBucket" class="text do"><em>DeveloperBucket</em></dt>
  <dd>Getter for the DeveloperBucket.</dd>
  <dt id="FirebaseDB.FirebaseToken" class="text do"><em>FirebaseToken</em></dt>
  <dd>Getter for the FirebaseToken.</dd>
  <dt id="FirebaseDB.FirebaseURL" class="text do"><em>FirebaseURL</em></dt>
  <dd>Specifies the URL for the Firebase.</dd>
</dl>

<p>The default value is currently my private Firebase URL, but this will
 eventually changed once the App Inventor Candle plan is activated.</p>

<dl>
  <dt id="FirebaseDB.Persist" class="boolean wo do"><em>Persist</em></dt>
  <dd>If true, variables will retain their values when off-line and the App exits. Values will be uploaded to Firebase the next time the App is run while connected to the network. This is useful for applications which will gather data while not connected to the network. Note: AppendValue and RemoveFirst will not work correctly when off-line, they require a network connection.<br /><br /> <i>Note</i>: If you set Persist on any Firebase component, on any screen, it makes all Firebase components on all screens persistent. This is a limitation of the low level Firebase library. Also be aware that if you want to set persist to true, you should do so before connecting the Companion for incremental development.</dd>
  <dt id="FirebaseDB.ProjectBucket" class="text"><em>ProjectBucket</em></dt>
  <dd>Getter for the ProjectBucket.</dd>
</dl>

<h3 id="FirebaseDB-Events">Events</h3>

<dl class="events">
  <dt id="FirebaseDB.DataChanged">DataChanged(<em class="text">tag</em>,<em class="any">value</em>)</dt>
  <dd>Indicates that the data in the Firebase has changed.
 Launches an event with the tag and value that have been updated.</dd>
  <dt id="FirebaseDB.FirebaseError">FirebaseError(<em class="text">message</em>)</dt>
  <dd>Indicates that the communication with the Firebase signaled an error.</dd>
  <dt id="FirebaseDB.FirstRemoved">FirstRemoved(<em class="any">value</em>)</dt>
  <dd>Event triggered by the “RemoveFirst” function. The argument “value” is the object that was the first in the list, and which is now removed.</dd>
  <dt id="FirebaseDB.GotValue">GotValue(<em class="text">tag</em>,<em class="any">value</em>)</dt>
  <dd>Indicates that a GetValue request has succeeded.</dd>
  <dt id="FirebaseDB.TagList">TagList(<em class="list">value</em>)</dt>
  <dd>Event triggered when we have received the list of known tags. Used with the “GetTagList” Function.</dd>
</dl>

<h3 id="FirebaseDB-Methods">Methods</h3>

<dl class="methods">
  <dt id="FirebaseDB.AppendValue" class="method"><i></i> AppendValue(<em class="text">tag</em>,<em class="any">valueToAdd</em>)</dt>
  <dd>Append a value to the end of a list atomically. If two devices use this function simultaneously, both will be appended and no data lost.</dd>
  <dt id="FirebaseDB.ClearTag" class="method"><i></i> ClearTag(<em class="text">tag</em>)</dt>
  <dd>Asks Firebase to forget (delete or set to “null”) a given tag.</dd>
  <dt id="FirebaseDB.GetTagList" class="method"><i></i> GetTagList()</dt>
  <dd>Get the list of tags for this application. When complete a “TagList” event will be triggered with the list of known tags.</dd>
  <dt id="FirebaseDB.GetValue" class="method"><i></i> GetValue(<em class="text">tag</em>,<em class="any">valueIfTagNotThere</em>)</dt>
  <dd>GetValue asks Firebase to get the value stored under the given tag.
 It will pass valueIfTagNotThere to GotValue if there is no value stored
 under the tag.</dd>
  <dt id="FirebaseDB.RemoveFirst" class="method"><i></i> RemoveFirst(<em class="text">tag</em>)</dt>
  <dd>Return the first element of a list and atomically remove it. If two devices use this function simultaneously, one will get the first element and the the other will get the second element, or an error if there is no available element. When the element is available, the “FirstRemoved” event will be triggered.</dd>
  <dt id="FirebaseDB.StoreValue" class="method"><i></i> StoreValue(<em class="text">tag</em>,<em class="any">valueToStore</em>)</dt>
  <dd>Asks Firebase to store the given value under the given tag.</dd>
  <dt id="FirebaseDB.Unauthenticate" class="method"><i></i> Unauthenticate()</dt>
  <dd>Unauthenticate from Firebase.

    <p>Firebase keeps track of credentials in a cache in shared_prefs
 It will re-use these credentials as long as they are valid. Given
 That we retrieve a FirebaseToken with a version long life, this will
 effectively be forever. Shared_prefs survive an application update
 and depending on how backup is configured on a device, it might survive
 an application removal and reinstallation.</p>

    <p>Normally this is not a problem, however if we change the credentials
 used, for example the App author is switching from one Firebase account
 to another, or invalided their firebase.secret, this cached credential
 is invalid, but will continue to be used, which results in errors.</p>

    <p>This function permits us to unauthenticate, which tosses the cached
 credentials. The next time authentication is needed we will use our
 current FirebaseToken and get fresh credentials.</p>
  </dd>
</dl>

<h2 id="ImageBot">ImageBot</h2>

<p>The ImageBot is a non-visible component that uses DALL-E 2 to create and edit images. You must
 supply your own OpenAI API key for this component by setting its ApiKey property in the blocks.</p>

<h3 id="ImageBot-Properties">Properties</h3>

<dl class="properties">
  <dt id="ImageBot.ApiKey" class="text wo"><em>ApiKey</em></dt>
  <dd>Specifies the ApiKey used to authenticate with the ImageBot.</dd>
  <dt id="ImageBot.InvertMask" class="boolean"><em>InvertMask</em></dt>
  <dd>Specifies whether the mask used for editing should have its alpha channel inverted.</dd>
  <dt id="ImageBot.Size" class="number"><em>Size</em></dt>
  <dd>Specifies the size of the generated image. Can be one of 256, 512, or 1024.</dd>
  <dt id="ImageBot.Token" class="text wo"><em>Token</em></dt>
  <dd>The MIT Access token to use. MIT App Inventor will automatically fill this
 value in. You should not need to change it.</dd>
</dl>

<h3 id="ImageBot-Events">Events</h3>

<dl class="events">
  <dt id="ImageBot.ErrorOccurred">ErrorOccurred(<em class="number">responseCode</em>,<em class="text">responseText</em>)</dt>
  <dd>The ErrorOccurred event will be run when an error occurs during processing, such as if you
 forget to provide an API key or the server is overloaded.</dd>
  <dt id="ImageBot.ImageCreated">ImageCreated(<em class="text">fileName</em>)</dt>
  <dd>The ImageCreated event will be run when the ImageBot successfully creates an image.</dd>
  <dt id="ImageBot.ImageEdited">ImageEdited(<em class="text">fileName</em>)</dt>
  <dd>The ImageCreated event will be run when the ImageBot successfully edits an image.</dd>
</dl>

<h3 id="ImageBot-Methods">Methods</h3>

<dl class="methods">
  <dt id="ImageBot.CreateImage" class="method"><i></i> CreateImage(<em class="text">description</em>)</dt>
  <dd>Create an image using the given description.</dd>
  <dt id="ImageBot.EditImageWithMask" class="method"><i></i> EditImageWithMask(<em class="any">imageSource</em>,<em class="any">maskSource</em>,<em class="text">prompt</em>)</dt>
  <dd>Edit the imageSource using the given description. The editable area of the image should be
 indicated by the maskSource. The sources can be a Canvas, an Image, or a string
 representing the path to a file.</dd>
</dl>

</article>
<script>
  // Handle redirection to documentation based on locale query parameter (if specified)
  (function() {
      var locale = window.location.search.match('[&?]locale=([a-zA-Z-]*)');
      if (locale) {
          if (locale[1].indexOf('en') === 0) {
              // English needs to stay at the top level to not break existing links
              var page = window.location.pathname.split('/');
              if (page.length === 5) {
                  page.splice(2, 1);
              } else {
                  // already on english
                  return;
              }
              window.location.href = page.join('/');
          } else {
              var page = window.location.pathname.split('/');
              if (page.length === 4) {
                  page.splice(2, 0, locale[1]);
              } else if (page[2].toLowerCase() != locale[1].toLowerCase()) {
                  page[2] = locale[1];
              } else {
                  return;  // already on the desired language
              }
              // Test that the page exists before redirecting.
              var xhr = new XMLHttpRequest();
              xhr.open('HEAD', page.join('/'), false);
              xhr.onreadystatechange = function() {
                  if (xhr.readyState == 4) {
                      if ((xhr.status == 200 || xhr.status == 204)) {
                          window.location.href = page.join('/');
                      } else if (xhr.status  >= 400) {
                          page.splice(2, 1);  // go to english version
                          window.location.href = page.join('/');
                      }
                  }
              };
              xhr.send();
          }
      }
  })();

  // Handle embedded documentation in help by removing website template
  if (window.self !== window.top) {
      setTimeout(function() {
          var videos = document.querySelectorAll('video');
          for (var i = 0; i < videos.length; i++) {
              if (parseInt(videos[i].getAttribute('width')) > 360) {
                  var aspect = parseInt(videos[i].getAttribute('height')) / parseInt(videos[i].getAttribute('width'));
                  videos[i].setAttribute('width', '360');
                  videos[i].setAttribute('height', '' + (360 * aspect));
              }
          }
          var h1 = document.querySelector('h1');
          var article = document.querySelector('article');
          article.insertBefore(h1, article.firstElementChild);
          document.body.innerHTML = article.outerHTML;
      });
  }
</script>

            </div>
            <div class="footer background-green">
    <div class="row container">
	<div class="col-xl-3">
	    <h3>MIT App Inventor</h3>
	    <!-- <form class="form-inline" action="/action_page.php">
		 <div class="form-group has-search">
		 <span class="fa fa-search form-control-feedback"></span>
		 <input type="text" class="form-control" placeholder="Search">
		 </div>
		 </form> -->
	</div>
	<div class="col-xl-6 legal text-center">
	    <ul>
		<li>
		    <a href="http://web.mit.edu" class="btn btn-link" role="button"
                       target="_blank">© 2012-2024 Massachusetts Institute of Technology</a>
		</li>
		<li>
		    <a href="http://creativecommons.org/licenses/by-sa/3.0/"
                       target="_blank" class="btn btn-link" role="button">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0</a>
		</li>
		<li>
		    <a href="http://appinventor.mit.edu/about/termsofservice"
                       target="_blank" class="btn btn-link" role="button">Terms of Service and Privacy Policy</a>
		</li>
	    </ul>
	</div>
	<div class="col-xl-3 links">
            <a href="https://community.appinventor.mit.edu" target="_blank">Support / Help</a><br>
            <a href="mailto:appinventor@mit.edu">Other Inquiries</a>
	    <div>
		<span>Twitter:</span>
		<a href="https://twitter.com/mitappinventor"
                   target="_blank" class="btn btn-link" role="button">@MITAppInventor</a>
	    </div>
	    <div>
	      <span>GitHub:</span>
	      <a href="https://github.com/mit-cml" class="btn btn-link" role="button"
                 target="_blank">mit-cml</a>
	    </div>
            <div>
              <span>Accessibility:</span>
              <a href="https://accessibility.mit.edu" role="button"
                 targe="_blank">accessibility.mit.edu</a>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="/static/js/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="/static/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script async src="/static/js/widgets.js" charset="utf-8"></script>
</div>
    </body>
</html>
